<template>
  <div class="popup">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <!-- 历史搜索  热门搜索 -->
    <historyHot
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      v-show="bloakshow == 1"
      @c_fu = "get_zi"
    ></historyHot>
    <!-- 搜索列表 -->
    <SearchList
      v-show="bloakshow == 2"
      :SearchListData="SearchListData"
      @from_erson = "get_erson"
    ></SearchList>
    <!-- 搜索商品展示列表 -->
    <SearchShowList 
      v-show="bloakshow == 3"
      :goodsListData="goodsListData"
    ></SearchShowList>
  </div>
</template>

<script>
import historyHot from "@/components/searchPopup/HistoryHot.vue";
import SearchList from "@/components/searchPopup/SearchList.vue";
import SearchShowList from "@/components/searchPopup/SearchShowList.vue";
import { Toast } from "vant";
import { GetPopupData, GetSearchListData,GetS_ShowListData} from "@/request/api";
export default {
  data() {
    return {
      value: "",
      defaultKeyword: "",
      historyKeywordList: [],
      hotKeywordList: [],
      // bloakshow的值有1 2 3 分别表示第一页  第二页   第三页
      bloakshow: "1",
      SearchListData: [],
      goodsListData:[]
    };
  },
  methods: {
    onSearch(val) {
      // Toast(val);
      GetS_ShowListData({keyword:val}).then(res=>{
        // console.log(res);
        this.goodsListData = res.data.data
      })
      this.bloakshow = 3;
    },
    onCancel() {
      //   Toast('取消');
      // history.go(-1)
      this.$router.go(-1);
    },
    onInput(v) {
      // console.log(123);
      this.bloakshow = 2;
      // console.log(v);
      GetSearchListData({ keyword: v }).then((res) => {
        // console.log(res.data);
        this.SearchListData = res.data;
      });
    },
    // 通过子传父获取的值 1
    get_zi(v){
      // console.log(v);
      this.onSearch(v)
      this.value = v
    },
    // 通过子传父获取的值 1
    get_erson(m){
      this.onSearch(m)
       this.value = m
    }

  },
  components: {
    historyHot,
    SearchList,
    SearchShowList,
  },
  created() {
    GetPopupData().then((res) => {
      console.log(res);
      this.defaultKeyword = res.data.defaultKeyword.keyword;
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
      console.log(this.defaultKeyword);
    });
  },
};
</script>

<style lang="less" scoped>
.popup {
  width: 100%;
  height: 100%;
  background-color: #eee;
  position: absolute;
  top: 0;
}
</style>
